<template>
  <div class="goods-container">
    <van-nav-bar
      class="page-nav-bar"
      title="新鲜好物"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <!-- 列表内容 -->
    <van-empty v-if="goodList.length===0 && !error && !loading" description="暂无商品数据信息" />
    <van-list v-model="loading"  @load="initData" :finished-text="goodList.length===0 ?'':'我也是有底线的'" :finished="finished" :error.sync="error">
      <GoodList :list="goodList" />
    </van-list>
  </div>
</template>
<script>
import { getNewProductList } from "@/api/home";
import GoodList from '@/components/good-list'
export default {
  name: "good",
  components: {
    GoodList,
  },
  data() {
    return {
      query:{
        pageNum:1,   // 页码
        pageSize:10, // 每页数量
      },
      goodList: [],
      loading:false,
      finished:false,
      error:false
    };
  },
  created() {
    Object.keys(this.$route.query).forEach(key=>{
      this.query[key] = this.$route.query[key]
    })
  },
  methods: {
    // 获取列表数据
    async initData() {
      try {
        const list = await getNewProductList(this.query);
        this.goodList.push(...list)
        if(list.length < this.query.pageSize) this.finished = true
      } catch (error) {
        console.log(error);
      }
      this.loading = false
    }
  },
};
</script>
<style lang="less" scoped>
.goods-container{
  padding-top: 100px;
  z-index: 1999;
}
</style>